<template>
  <app-header />
  <router-view v-slot="{ Component }">
    <!--    切记 transition包裹的组件只能有一个节点 多了就会空白-->
    <transition name="fade" mode="out-in">
      <component :is="Component"></component>
    </transition>
  </router-view>

  <!-- Player -->
  <Player />

  <auth />
</template>

<script>
import AppHeader from '@/components/Header.vue'
import Auth from '@/components/Auth.vue'
import { mapWritableState } from 'pinia'
import useUserStore from '@/stores/user'
import { auth } from './includes/firebase'
import Player from '@/components/Player.vue'

export default {
  name: 'App',
  components: {
    Player,
    AppHeader,
    Auth
  },
  computed: {
    ...mapWritableState(useUserStore, ['userLoggedIn'])
  },
  created() {
    // 保证了每次刷新 数据依然在
    if (auth.currentUser) {
      this.userLoggedIn = true
    }
  }
}
</script>

<style>
.fade-enter-from {
  opacity: 0;
}

.fade-enter-active {
  transition: all 0.5s linear;
}

.fade-leave-to {
  opacity: 0;
}

.fade-leave-to {
  transition: all 0s linear;
}
</style>
